<template>
  <view :class="`container ${show ? 'popupFixed' : ''} `">
	  <view class="title" @click="show = true">地图选择</view>
		<up-popup :show="show" @close="show = false" @open="open">
		  <view class="localList">
			<view class="top">
				<span></span>
			</view>
			<view class="list">
				<template v-for="(item, index) in data" :key="index">
					<view class="row">
						<view class="image">
							<image src="/static/row.png" mode=""></image>
						</view>
						<view class="info">
							<view class="name">淄博烧烤</view>
							<view class="desc">
								营业时间：周一至中午 09:00-18:00营业时间：周一至中午 09:00-18:00营业时间：周一至中午 09:00-18:00营业时间：周一至中午 09:00-18:00
							</view>
							<view class="tag">距你250米，步行十分钟</view>
						</view>
						<view class="icon">
							导航
						</view>
					</view>
				</template>
			</view>
		  </view>
		</up-popup>
	  <view class="menu">我是模拟底部导航</view>
  </view>
</template>
<script>
	
export default {
	components: {
		
	},
	data() {
		return {
			show: false,
			data: new Array(10).fill(null),
		}
	},
	methods: {
		open() {
			console.log("我打開了")
		}
	}
}
</script>
<style lang="scss" scoped>
	.container{
		width: 100%;
		height: calc(100vh - 44px);
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		background: url(../../static/mapbgk.png);
		.title{
			width: 80px;
			height: 30px;
			line-height: 30px;
			background: skyblue;
			text-align: center;
			border-radius: 5px;
			color: #fff;
		}
		.localList{
			padding: 10px 10px 60px 10px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			touch-action: none;
			.top{
				width: 100%;
				height: 10px;
				display: flex;
				justify-content: center;
				span{
					width: 40px;
					height: 4px;
					border-radius: 6px;
					background: #B7B7B7;
				}
			}
			.list{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				height: 600px;
				overflow-y: scroll;
				.row{
					width: 100%;
					display: flex;
					margin-bottom: 10px;
					position: relative;
					.image{
						width: 100px;
						height: 100px;
						uni-image{
							width: 100px;
							height: 100px;
							border-radius: 6px;
						}
					}
					.info{
						margin-left: 10px;
						display: flex;
						flex-wrap: wrap;
						.name{
							width: 100%;
							font-size: 15px;
							color: #000;
							max-height: 30px;
							font-weight: 600;
						}
						.desc{
							height: 50px;
							max-width: 180px;
							overflow:hidden;
							text-overflow:ellipsis;
							display:-webkit-box; 
							-webkit-box-orient:vertical;
							-webkit-line-clamp:2; 
						}
						.tag{
							max-height: 20px;
						}
						.desc, .tag{
							width: 100%;
							font-size: 12px;
							color: #aaa;
						}
						.tag, .name{
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					.icon{
						position: absolute;
						right: 0px;
						bottom: 0px;
						border-radius: 16px;
						width: 75px;
						height: 30px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						background: #2EA755;
						background-image: url(/static/icon.png);
						background-repeat: no-repeat;
						background-position: 11px 6px;
						background-size: 25%;
						padding-left: 19px;
						box-sizing: border-box;
						font-size: 14px;
					}
				}
			}
		}
		.menu{
			width: 100%;
			height: 50px;
			background: green;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 6px;
			position: fixed;
			bottom: 0px;
			left: 0px;
			z-index: 99999;
		}
		&.popupFixed{
			overflow: hidden;
			position: fixed;
		}
	}
</style>
